<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<!DOCTYPE html>
<html>
<head>
<title>View and Book</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/script.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css"></style>

<script type="text/javascript">
	$(function() {
		$("#addToCart").submit(function(event) {
			// Stop form from submitting normally
			event.preventDefault();
			var errorBox = $('#cartStatus');
			var url = $('#encodedAdd').val();
			var seatNum = $('#seatNum').val();
			if ($("#errors").val() == "true") {
				errorBox.text("Can't add to cart: Check seat count");
				errorBox.append('<br /> <br />');
				errorBox.removeClass("error").addClass("error_show");
				return false;
			}
			$.post(url, {
				seats : seatNum
			}, function(data, status) {
				if (data == "added") {
					errorBox.text("Flight Successfully added to cart");
					errorBox.append('<br /> <br />');
					errorBox.addClass("success");
				} else {
					errorBox.removeClass("error").addClass("error_show");
				}
			});
		});
	});
</script>

<script type="text/javascript">
          $(document).ready(function(){
              $("#seatNum").change(function(){
            	  var planeID = ${flight.planeId};
            	  var flightID = ${flight.id};
            	  var firstClass = ${flight.firstClass};
            	  var business = ${flight.business};
            	  var economy = ${flight.economy};
				  var classType = '${flight.selectedClass}';
                  var seatNum = $(this).val();
                  var url = $("#checkSeats").val();
                  var errorBox = $('#error_box');
                  
			$.post(url, {
						planeID : planeID,
						firstClass : firstClass,
						business : business,
						economy : economy,
						classType : classType,
						seats : seatNum,
						flightID : flightID
					}, function(data, status) {
						if(data=="notAdded"){
							$("#errors").val("true");
							errorBox.text("Not enough seats available");
							errorBox.removeClass("error").addClass("error_show");
						} else {
							$("#errors").val("false");
							errorBox.removeClass("error_show").addClass("error");
						}
					});
			
		
				});
			});
</script>

</head>
<body>
<jsp:useBean id="flight" scope="session" type="model.Flight"/>
	<div><%@include file="/WEB-INF/header.jsp" %></div>
	<div class="content-wrapper">
		<div id="body" style="background:; position: static;">
			<br>
			<h1>Flight Information</h1>
			<br>
			<div id="cartStatus"></div>
			<form id="addToCart" name="Select" method="post" action="#">
			<fieldset>
				<ul>
					<li><b>Flight Number:</b> <c:out value="${sessionScope.flight.id}"/> </li>
					<li><b>Airline:</b> <c:out value="${sessionScope.flight.operator}"/> </li>
					<li><b>Flight Date:</b> <fmt:formatDate value="${sessionScope.flight.departure}" pattern="MM/dd/yyyy"/></li>
					<li><b>Departure:</b> <fmt:formatDate value="${sessionScope.flight.departure}" pattern="hh:mm a"/></li>
					<li><b>Arrival:</b> <fmt:formatDate value="${sessionScope.flight.arrival}" pattern="hh:mm a"/></li>
					<li><b>Departing from:</b> <c:out value="${sessionScope.flight.source}"/></li>
					<li><b>Going to:</b> <c:out value="${sessionScope.flight.destination}"/></li>
					<li><b>Flight duration:</b> <c:out value="${sessionScope.flight.timeDifference}"/></li>
					<li><b>Cost:</b> $<c:out value="${sessionScope.flight.cost}"/></li>
					<li><b>Number of Seats:</b><input type="number" id="seatNum" value="${sessionScope.flight.seats}" name="seats"
									min="1" max="100" /></li>
					<li><b>Seat Class:</b> <c:out value="${sessionScope.flight.selectedClass}"/></li>
				</ul>
			</fieldset>

			<div style="margin: 5px">
					<c:url value="AddToCart" var="encodedURLAdd"></c:url> 
					<input type="hidden" name="encodedAdd" id="encodedAdd" value="${encodedURLAdd}">
					<input type="submit" name="Select" value="Add to Cart" class="button">
					
					<c:url value="ShoppingCart.jsp" var="encodedURLCart"></c:url> 
					<a href="${encodedURLCart}" class="button" style="border: 2px outset #E0E0E0;">Check Out</a>
					
					<c:url value="FlightSearchQuery.jsp" var="encodedURLSearch"></c:url> 
					<button class="button" onclick="location.href='${encodedURLSearch}'">Search for new flights</button>
					<button type="button" class="button" name="back" onclick="history.back()">Back to search results</button>	
			</div>
			<input type="hidden" name="errors" id="errors" value="false">
			<c:url value="CheckSeats" var="encodedURLSeats"></c:url> 
			<input type="hidden" name="checkSeats" id="checkSeats" value="${encodedURLSeats}">
			</form>
			
			<div id="error_box"></div>
			
		</div>
	</div>

</body>
</html>